<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>续费</title>
    <meta content="webkit" name="renderer">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"
          name="viewport">
    <link href="../../layuiadmin/layui/css/layui.css" media="all" rel="stylesheet">
</head>
<body>

<div class="layui-form" id="layuiadmin-app-form-list" lay-filter="layuiadmin-app-form-list"
     style="padding: 20px 30px 0 0;">
    <input id="entityId" type="hidden"/>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">房间号</label>
            <div class="layui-input-block">
                <select id="roomId" lay-filter="roomId" lay-verify="required">
                    <option value="">请选择房间号</option>
                </select>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">房间单价</label>
        <div class="layui-input-inline">
            <input type="text" id="onePrice" lay-verify="required"
                   autocomplete="off" class="layui-input layui-disabled" readonly disabled>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">住客姓名</label>
        <div class="layui-input-inline">
            <input type="text" id="realname" lay-verify="required"
                   autocomplete="off" class="layui-input layui-disabled" readonly disabled>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">预离时间</label>
        <div class="layui-input-inline">
            <input type="text" id="out_time" lay-verify="required"
                   autocomplete="off" class="layui-input layui-disabled" readonly disabled>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">续住天数</label>
        <div class="layui-input-inline">
            <input type="number" id="days" min="1" value="0" lay-verify="required|number"
                   autocomplete="off" class="layui-input" onchange="comTotalMoney(this)">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">续缴金额(元)</label>
        <div class="layui-input-inline">
            <input type="number" id="renewPrice" lay-verify="required|number"
                   autocomplete="off" class="layui-input layui-disabled" value="0" readonly>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">支付类型</label>
        <div class="layui-input-inline">
            <select lay-filter="zhifus" id="zhifus">
                <option value="0" selected>支付宝</option>
                <option value="1">现金</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">操作</label>
        <div class="layui-input-inline">
            <input type="button" onclick="pay()"
                   class="layui-btn layui-btn-xs layui-btn-normal layui-btn-radius"
                   style="width: 70px;"
                   value="确认付款">
            <input type="button" onclick="checkPay()"
                   class="layui-btn  layui-btn-danger layui-btn-xs layui-btn-radius"
                   style="width: 40px;" value="刷新">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">支付状态</label>
        <div class="layui-input-inline">
            <input type="text" id="payStatus" style="color: #ef5353" class="layui-input" value="待付款" readonly>
        </div>
    </div>
    <div class="layui-form-item layui-hide">
        <input id="entity-submit" lay-filter="entity-submit" lay-submit type="button"
               value="确认添加">
        <input id="layuiadmin-app-form-edit" lay-filter="layuiadmin-app-form-edit" lay-submit type="button"
               value="确认编辑">
    </div>
</div>

<script src="../../layuiadmin/layui/layui.js"></script>
<script src="../../js/jquery-1.8.3.min.js"></script>
<script>
    //下拉框初始化
    $.ajax({
        url: '/room_status/toAdd',
        type: 'get',
        dataType: 'json',
        async: false,//设置阻断
        success: function (data) {
            //将下拉框中添加数据
            var modelList = data.room;
            if (modelList && modelList.length != 0) {
                for (var i = 0; i < modelList.length; i++) {
                    var option = "<option value=\"" + modelList[i].rid + "\"";
                    option += ">" + modelList[i].rname + "</option>";  //动态添加数据
                    $('#roomId').append(option);
                }
            }
        }
    })

    //计算总金额
    function comTotalMoney(obj) {
        var day = parseInt($("#days").val());
        var max = parseInt($("#days").attr("max"));
        if (day > max || day <= 0) {
            $("#days").val(1);
            day = 1
        }
        var tprice = parseFloat($("#onePrice").val());
        var total = (day * tprice);
        $("#renewPrice").val(total.toFixed(2));
    }

    //格式化日期
    function dateFormat(value) {
        if (null != value && "" != value) {
            var date = new Date(value);
            var y = date.getFullYear();
            var m = date.getMonth() + 1;
            if (m < 10) {
                m = "0" + m;
            }
            var d = date.getDate();
            if (d < 10) {
                d = "0" + d;
            }
            return y + '-' + m + '-' + d;
        } else {
            return "";
        }
    }

    //获得参数
    function getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] == variable) {
                return pair[1];
            }
        }
        return (false);
    }

    //补零操作
    function addZero(num) {
        if (parseInt(num) < 10) {
            num = '0' + num;
        }
        return num;
    }

    //获取时间
    function getMyDate(str) {
        var oDate = new Date(str),
            oYear = oDate.getFullYear(),
            oMonth = oDate.getMonth() + 1,
            oDay = oDate.getDate(),
            oHour = oDate.getHours(),
            oMin = oDate.getMinutes(),
            oSen = oDate.getSeconds(),
            oTime = oYear + '-' + addZero(oMonth) + '-' + addZero(oDay);
        return oTime;
    }

    //所选房间id
    var oldId = getQueryVariable("id")
    var orderNumber = ""
    var orderN = "";
    var dayOut = "";

    //点击确认付款
    function pay() {
        orderN = orderNumber + new Date().getMilliseconds() + "Y";
        var zhifus = $("#zhifus").val();
        var renewPrice = $("#renewPrice").val();
        if (renewPrice == 0) return;
        if (zhifus == "0") {
            var payURL = "/desk/pay?payMoney=" + renewPrice + "&orderNumber=" + orderN;
            var winObj = window.open(payURL, 'newwindow', 'height=650, width=800, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no')
            $(winObj).on("unload", function () {
                checkPay();
            })
        } else {
            $("#payStatus").val("已付款")
            $("#renewPrice").attr("readonly", "true");
        }
    }

    function checkPay() {
        if ($("#zhifus").val() == 1) {
            $("#payStatus").val("已付款")
            $("#renewPrice").attr("readonly", "true");
            return;
        }
        var index = layer.load(2, {shade: 0.1}); //0代表加载的风格，支持0-2
        //窗口关闭时到数据库查询该订单是否付款成功
        $.ajax({
            url: "/room_predict_order/payFind",
            type: 'get',
            dataType: 'json',
            data: {"orderNumber": orderN},
            success: function (data) {
                layer.close(index);
                $("#payStatus").val(data.msg);
            },
            error: function () {
                layer.close(index);
                parent.layer.alert("信息获取失败！");
                return;
            }
        });
    }


    //layui配置
    layui.config({
        base: '../../layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form'], function () {
            var $ = layui.$
                , form = layui.form;
            //监听下拉框
            //监听select下拉选中事件
            form.on('select(roomId)', function (data) {
                //得到select原始DOM对象
                var value = data.value;
                oldId = value;
                //根据选择的房间id查询该房间是否可续住以及入住信息
                $.ajax({
                    url: "/roomRealOrder/toRenew",
                    type: 'post',
                    dataType: 'json',
                    async: false,//设置阻断
                    data: {
                        "RoomId": value,
                    },
                    success: function (data) {
                        $("#onePrice").val(data.info.price);
                        $("#realname").val(data.info.realname);
                        $("#out_time").val(dateFormat(data.info.real_out_time));
                        $("#days").attr("max", data.info.days - 1);
                        if (data.info.days <= 1) {
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index); //再执行关闭
                            parent.layer.msg("该房间后续已有预定，不许续住");
                        }
                    }
                })
            });
            //监听提交
            form.on('submit(entity-submit)', function (data) {
                var day = $("#days").val();
                if (day == 0 || day == "") {
                    layer.msg("请先输入续费天数!", {icon: 5});
                    return;
                }
                if ($("#payStatus").val() != "已付款") {
                    layer.msg("请先支付!", {icon: 5});
                    return;
                }
                var load = layer.load(2, {shade: 0.1});
                var field = data.field; //获取提交的字段
                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                //提交 Ajax 成功后，关闭当前弹层并重载表格
                $.ajax({
                    url: "/roomRealOrder/renew",
                    type: 'post',
                    dataType: 'json',
                    async: false,//设置阻断
                    data: {
                        "roomId": oldId,
                        "days": day,
                        "addPrice": $("#renewPrice").val()
                    },
                    success: function (data) {
                        layer.close(load);
                        parent.layer.msg(data.msg, {icon: data.icon, zIndex: layer.zIndex + 100});
                    }
                })
                parent.layer.close(index); //再执行关闭
            });
        }
    )
</script>
</body>
</html>